/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="'告警详情'" :visible.sync="show" append-to-body width="35%" :before-close="handleClose">
    <el-form :inline="true" :model="formInline" v-if="row.warnSource">
      <el-row>
        <el-col :span="12">
          <el-form-item label="场站名称：">
            <span>{{row.stationName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="告警内容">
            <span>{{row.checkDesc}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="桩名称：">
            <span>{{row.stakeName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="告警来源：">
            <span>{{warnSource[Number(row.warnSource)-1].name}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="告警等级：" v-if="row.warnLevel">
            {{ warnLevel[Number(row.warnLevel)-1].name}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家：">
            <span>{{row.factName}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间：">
            <span>{{row.createTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="row.checkUrl">
        <el-col :span="12">
          <el-form-item label="图片：">
           <el-image :src="row.checkUrl" :preview-src-list="[row.checkUrl]"></el-image>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['DialogComponentShow','row'],
  data() {
    return {
      warnLevel:[
        {
          name:'暂无风险',
          color:'green'
        },
        {
          name:'低风险',
          color:'green'
        },
        {
          name:'中风险',
          color:'#FF8D1A'
        },
        {
          name:'高风险',
          color:'#FF0000'
        },
        {
          name:'重大风险',
          color:'red'
        },
      ],
      warnSource: [
        {
          name: '风险评估',
          value: '1'
        },
        {
          name: '远程巡检',
          value: '2'
        },
        {
          name: '故障诊断',
          value: '3'
        }
      ],
      show: false, //弹窗默认隐藏
      formInline: {
        startTime: '',
        endTime:''
      },
    };
  },
  mounted() {
    //显示弹窗
    this.show = this.DialogComponentShow
  },
  methods: {
    //关闭弹窗
    handleClose() {
      this.show = false
      this.$emit('closeDialog')
    },
  }
};
</script>

<style lang="scss" scoped>
>>> .el-dialog__header{
  padding: 20px !important;
  background: #1B7B87;
}
>>> .el-dialog__title{
  color: #fff !important;
  font-size: 16px;
}
</style>
